<include file="common/header_lixin" title="交易中心" />
<style>
    .header .header-right {
        padding-right: 0;
        margin-right: 0.2rem;
        font-size: 0.2rem;
    }
</style>
<div class="page">
    <div class="page-hd">
        <div class="header bor-1px-b">
            <div class="header-left">
                <a href="javascript:history.go(-1)" class="left-arrow"></a>
            </div>
            <div class="header-title">交易中心</div>
            <if condition="$step eq 1">
                <div class="header-right">
                    <a href="{:U('Acc/Transaction/purchase_orders')}">购入订单</a>
                </div>
                <elseif condition="$step eq 2"/>
                <div class="header-right">
                    <a href="{:U('Acc/Transaction/transfer_order')}">出让订单</a>
                </div>
            </if>

        </div>
    </div>

    <div class="page-bd">
        <!-- 页面内容-->
        <div class="weui-tab">
            <div class="weui-navbar">
                <a class='weui-navbar__item <eq name="step" value="0">weui-bar__item--on</eq>' href="{:U('Acc/Transaction/transaction_center')}"  >
                    交易行情
                </a>
                <a class='weui-navbar__item <eq name="step" value="1">weui-bar__item--on</eq>' href="{:U('Acc/Transaction/transaction_center',array('step'=>1))}"  curr_type="1">
                    买入
                </a>
                <a class='weui-navbar__item <eq name="step" value="2">weui-bar__item--on</eq>' href="{:U('Acc/Transaction/transaction_center',array('step'=>2))}" curr_type="2">
                    卖出
                </a>
            </div>
            <div class="weui-tab__bd">
                <div id="tab1" class='weui-tab__bd-item <eq name="step" value="0">weui-tab__bd-item--active</eq>'>
                    <div class="jy_center mt20">
                        <div class="fs48 font_number tc">{$dc_cny_rate}</div>
                        <div class="fs26 text-gray2 tc">≈当前价格 ($)</div>
                        <div class="fs26 text-gray2 tc mt10">涨跌幅：<span class="fw600 text-default">{$ACC_float}%</span></div>
                        <div class="mt10" style="display: flex;justify-content: space-between;">
                            <div class="fs26 text-gray2 tc">最高价格：<span class="text-default fw600">{$extreme_value.max_price || default='0'}</span></div>
                            <div class="fs26 text-gray2 tc">最低价格：<span class="text-default fw600">{$extreme_value.min_price || default='0'}</span></div>
                        </div>
                        <div class="fs26 text-gray2 mt10">当前出售订单：<span class="fw600 text-default">{$total_order_num}</span></div>
                    </div>
                    <div class="priceBox mt20">
                        <div class="title">
                            <div class="left"><i></i>往期价格走势</div>
                        </div>
                        <div class="echartsBox">
                            <div id="price"></div>
                        </div>
                    </div>
                    <div class="priceBox mt20">
                        <div class="title">
                            <div class="left"><i></i>往期交易量走势</div>
                        </div>
                        <div class="echartsBox">
                            <div id="num"></div>
                        </div>
                    </div>
                </div>
                <div id="tab2" class='weui-tab__bd-item <eq name="step" value="1">weui-tab__bd-item--active</eq>'>
                    <form  id="buy_one"   action="{:U('acc/Transaction/buy')}" method="post">
                        <div class="weui-cells weui-cells_form">
                            <div class="weui-cell">
                                <div class="weui-cell__hd">
                                    <label class="weui-label">买入估价</label>
                                </div>
                                <div class="weui-cell__bd fs28 text-muted">
                                    <span class="fs36 text-default mr10 font_number">{$config.dc_cny_rate}</span>$
                                </div>
                            </div>
                            <div class="weui-cell">
                                <div class="weui-cell__hd">
                                    <label class="weui-label">买入数量</label>
                                </div>
                                <div class="weui-cell__bd">
                                    <input class="weui-input" type="text" onkeyup="check_input1(this)" name="number" placeholder="请输入数量">
                                </div>
                                <div class="weui-cell__ft">
                                    <p class="fs28 text-muted">ACC</p>
                                </div>
                            </div>
                            <div class="weui-cell">
                                <div class="weui-cell__hd">
                                    <label class="weui-label">买入单价</label>
                                </div>
                                <div class="weui-cell__bd">
                                    <input class="weui-input" name="total_price" onkeyup="check_input1(this)" value="{$config.dc_cny_rate}" type="text"  placeholder="请输入金额">
                                </div>
                                <div class="weui-cell__ft">
                                    <p class="fs28 text-muted">$</p>
                                </div>
                            </div>
                            <div style="text-align: center;color:red;">可修改挂卖区间为{$config.hang_buy_price.start}$-{$config.hang_buy_price.finish}$</div>
                        </div>
                        <div class="weui-btn-area">
                            <a href="javascript:;" onclick="submit_buy()" class="weui-btn weui-btn_primary">立即买入</a>
                        </div>
                    </form>

                    <div class="priceBox">
                        <div class="title">
                            <div class="left"><i></i>市场挂单</div>
                        </div>
                    </div>
                    <div id="loadlist1">
                        <!--<div class="weui-cells mt0">-->
                            <!--<div class="weui-cell fs28">-->
                                <!--<div class="weui-cell__bd">-->
                                    <!--<p>谢明华</p>-->
                                <!--</div>-->
                                <!--<div class="weui-cell__ft">-->
                                    <!--<p class="text-default fs28">交易笔数：15</p>-->
                                <!--</div>-->
                            <!--</div>-->
                            <!--<div class="weui-cell fs28 border-none">-->
                                <!--<div class="weui-cell__bd">-->
                                    <!--<p class="fs26 text-muted">单价：200.23 $</p>-->
                                    <!--<p class="fs26 text-muted mt10">数量：10 ACC</p>-->
                                    <!--<p class="fs26 text-muted mt10">价格：66.8 $</p>-->
                                <!--</div>-->
                                <!--<div class="weui-cell__ft">-->
                                    <!--<span class="jy_btn">买入</span>-->
                                <!--</div>-->
                            <!--</div>-->
                        <!--</div>-->
                    </div>
                    <div class="weui-loadmore" style="height:20px;display:none;">
                        <i class="weui-loading"></i>
                        <span class="weui-loadmore__tips">正在加载</span>
                    </div>
                    <div class="weui-nodate " style="display:none;padding-bottom:30px;height:20px;margin: 1.5em auto;width: 65%;text-align: center;font-size: 14px;">
                        已经到底了
                    </div>

                </div>
                <div id="tab3" class='weui-tab__bd-item <eq name="step" value="2">weui-tab__bd-item--active</eq>'>

                    <form  id="sell_one"   action="{:U('Acc/Transaction/immediately_sell')}" method="post">
                        <div class="weui-cells weui-cells_form">
                            <div class="weui-cell">
                                <div class="weui-cell__hd">
                                    <label class="weui-label">卖出估价</label>
                                </div>
                                <div class="weui-cell__bd fs28 text-muted">
                                    <span class="fs36 text-default mr10 font_number">{$config.dc_cny_rate}</span>$
                                </div>
                            </div>
                            <div class="weui-cell">
                                <div class="weui-cell__hd">
                                    <label class="weui-label">卖出数量</label>
                                </div>
                                <div class="weui-cell__bd">
                                    <input class="weui-input" name="number" onkeyup="check_input1(this)" type="text"  placeholder="请输入数量">
                                </div>
                                <div class="weui-cell__ft">
                                    <p class="fs28 text-muted">ACC</p>
                                </div>
                            </div>
                            <div class="weui-cell">
                                <div class="weui-cell__hd">
                                    <label class="weui-label">卖出单价</label>
                                </div>
                                <div class="weui-cell__bd">
                                    <input class="weui-input" type="number" name="total_price" value="{$config.dc_cny_rate * $config.hang_sell_price /100}" readonly placeholder="请输入金额">
                                </div>
                                <div class="weui-cell__ft">
                                    <p class="fs28 text-muted">$</p>
                                </div>
                            </div>
                        </div>
                        <div class="weui-btn-area">
                            <a href="javascript:;" onclick="submit_sell()" class="weui-btn weui-btn_primary">立即卖出</a>
                        </div>
                    </form>

                    <div class="priceBox">
                        <div class="title">
                            <div class="left"><i></i>市场挂单</div>
                        </div>
                    </div>
                    <div id="loadlist2">
                        <!--<div class="weui-cells mt0">-->
                            <!--<div class="weui-cell fs28">-->
                                <!--<div class="weui-cell__bd">-->
                                    <!--<p>谢明华</p>-->
                                <!--</div>-->
                                <!--<div class="weui-cell__ft">-->
                                    <!--<p class="text-default fs28">交易笔数：15</p>-->
                                <!--</div>-->
                            <!--</div>-->
                            <!--<div class="weui-cell fs28 border-none">-->
                                <!--<div class="weui-cell__bd">-->
                                    <!--<p class="fs26 text-muted">单价：200.23 $</p>-->
                                    <!--<p class="fs26 text-muted mt10">数量：10 ACC</p>-->
                                    <!--<p class="fs26 text-muted mt10">价格：66.8 $</p>-->
                                <!--</div>-->
                                <!--<div class="weui-cell__ft">-->
                                    <!--<span class="jy_btn">卖出</span>-->
                                <!--</div>-->
                            <!--</div>-->
                        <!--</div>-->
                    </div>
                    <div class="weui-loadmore" style="height:20px;display:none;">
                        <i class="weui-loading"></i>
                        <span class="weui-loadmore__tips">正在加载</span>
                    </div>
                    <div class="weui-nodate " style="display:none;padding-bottom:30px;height:20px;margin: 1.5em auto;width: 65%;text-align: center;font-size: 14px;">
                        已经到底了
                    </div>

                </div>
            </div>
        </div>
    </div>
    <include file="common/footer_lixin"/>
</div>
<script>
    $(function() {
        FastClick.attach(document.body);
    });
</script>
<script src="__PUBLIC__/assets/js/echarts.common.min.js"></script>
<script>
    // 图表一
    // 基于准备好的dom，初始化echarts实例
    var option_data = $.parseJSON('{$statistics}');

    var myChart = echarts.init(document.getElementById('price'));
    window.onresize = myChart.resize;
    // 指定图表的配置项和数据
    var option = {
        xAxis: {
            type: 'category',
            data: option_data.days
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: option_data.mean,
            type: 'line',
            smooth: true
        }],
        grid: {
            x: 40,
            x2: 20,
            y: 10,
            height: 110
        },
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);


    // 图表二
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('num'));
    window.onresize = myChart.resize;
    // 指定图表的配置项和数据
    var option = {
        xAxis: {
            type: 'category',
            data: option_data.days
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: option_data.num,
            type: 'line',
            smooth: true
        }],
        grid: {
            x: 40,
            x2: 20,
            y: 10,
            height: 110
        },
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
<script>
    var user_balance = {$user.balance};
    function check_input1(that) {
        //清除"数字"和"."以外的字符
        var value = that.value;
        value = value.replace(/[^\d.]/g, "");
        //验证第一个字符是数字而不是
        value = value.replace(/^\./g, "");
        //只保留第一个. 清除多余的
        value = value.replace(/\.{2,}/g, ".");
        value = value.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
        //只能输入两个小数
        value = value.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');
        value = value.substring(0, 10);
        that.value = value;
    }


    function submit_buy() {
        var number = $("#buy_one").find('input[name=number]').val();
        var total_price = $("#buy_one").find('input[name=total_price]').val();
        var min_price = "{$config.hang_buy_price.start}";
        var max_price = "{$config.hang_buy_price.finish}";
        var error="";
        if(number>=10 && number%10 != 0){
            error+="数量必须是10的倍数\n<br>";
        }
        if(number<=0){
            error+="买入数量不能小于1个\n<br>";
        }
        if(total_price<=0){
            error+="买入金额必须大于0\n<br>";
        }
        if(total_price<parseInt(min_price)){
            error+="请填写正确价格区间";
        }
        if(total_price>parseInt(max_price)){
            error+="请填写正确价格区间";
        }
        if(error){
            $.alert(error);
            return false;
        }

        $.ajax({
            type: 'POST',
            dataType:"JSON",
            data:{type:1,number:number,total_price:total_price},
            url: "/index.php?m=acc&c=Transaction&a=check_user_orders",
            success: function (res) {

                if (res.code==0) {
                    $('#buy_one').submit();
                } else {
                    $.toast(res.msg, "cancel");
                }
            }
        })

    }

    //卖出提交
    function submit_sell() {
        var number = $("#sell_one").find('input[name=number]').val();
        var total_price =$("#sell_one").find('input[name=total_price]').val();


        var error="";


        if(user_balance<number){
            error+="卖出数量不能大于可交易数量\n<br>";
        }
        if(number>=10 && number%10 != 0){
            error+="数量必须是10的倍数\n<br>";
        }
        if(number<=0){
            error+="卖出数量不能小于1个\n<br>";
        }
        if(total_price<=0){
            error+="卖出金额必须大于0\n<br>";
        }



        if(error){
            $.alert(error);
            return false;
        }

        $.ajax({
            type: 'POST',
            dataType:"JSON",
            data:{type:2,number:number,total_price:total_price},
            url: "/index.php?m=Acc&c=Transaction&a=check_user_orders",
            success: function (res) {

                if (res.code==0) {
                    $('#sell_one').submit();
                } else {
                    $.toast(res.msg, "cancel");
                }
            }
        })



    }
</script>
<script>
    //加载更多商品
    pages = 1;
    loading = false;  //状态标记
    $(".weui-tab__bd-item").infinite().on("infinite", function () {
        if (loading) return;
        loading = true;
        pages++; //页数
        $('.weui-loadmore').show();
        setTimeout(function () {
            loadlist();
            loading = false;
        }, 1500);   //模拟延迟
    });
    function loadlist() {
        var html = "";
        var type = $('.weui-navbar').find('.weui-bar__item--on').attr('curr_type');
        var data={
            type:type,
            pages:pages,
        };
        $.ajax({
            type: 'POST',
            data:data,
            url: "/index.php?m=Acc&c=Transaction&is_ajax=1&a=trade_list&p=" + pages,
            success: function (data) {
//                console.log(data);
                if (data) {
                    $('#loadlist'+type).append(data);
                    $(".weui-loadmore").hide();
                    loading = false;
                } else {
                    loading = true;
                    $(".weui-nodate").show();
                    $(".weui-loadmore").hide();
                    // $('#getmore').remove();
                }
            }
        })
    }
    loadlist();

    //确认是否买入
    function confirm_buy(id){
        window.location.href="/index.php?m=Acc&c=Transaction&a=buy_acc&id="+id;
    }

    //确认是否卖出
    function confirm_sell(id){
        window.location.href="/index.php?m=Acc&c=Transaction&a=sell_acc&id="+id;
    }

</script>
</body>
</html>